<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="工资"></u-navbar>
		<view class="d-p-30">
			<view><text class="d-font-36" style="font-weight: bold;">班组人员工资发放列表</text></view>
			<template>
				<view class="card d-m-t-30 d-p-30" v-for="(item, index) in list" :key="index">
					<view class="d-col-top d-font-24">
						<view class="d-flex" style="color: #5D6672;">
							<view class="d-flex-1 ">
								<text style="font-weight: bold;">姓名</text>
								<text class="d-m-l-20">{{ item.ryxm }}</text>
							</view>
							<view class="">
								<u-button
									text="查看"
									size="mini"
									shape="circle"
									:customStyle="{
										color: '#FFB61D',
										borderColor: '#FFB61D'
									}"
									@click="wagesRecord(item)"
								></u-button>
							</view>
						</view>
						<view class="d-flex d-m-t-20" style="color: #5D6672;">
							<view class="d-flex-1 ">
								<text style="font-weight: bold;">身份证</text>
								<text class="d-m-l-20">{{ item.zjhm }}</text>
							</view>
							<view>
								<text style="font-weight: bold;">实发金额</text>
								<text class="d-m-l-20">{{ item.sfje }}元</text>
							</view>
						</view>
					</view>
				</view>
			</template>
			<template v-if="!list || list.length <= 0">
				<view style="padding: 10vh;"><u-empty icon="/static/image/none.png" text="暂无数据"></u-empty></view>
			</template>
		</view>
	</view>
</template>

<script>
import { getWagesPopList } from '../../../common/api.js';
export default {
	data() {
		return {
			show: {
				showDate: false
			},
			id: null,
			pageNum: 1,
			pageSize: 20,
			pageLast: 1,
			list: []
		};
	},
	onLoad(e) {
		this.id = e.id || null;
		this.init();
	},
	onReachBottom() {
		if (this.pageNum < this.pageLast) {
			++this.pageNum;
			this.getList().then(e => {
				this.list = this.list.concat(e.data);
			});
		}
	},
	methods: {
		init() {
			this.pageNum = 1;
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			this.getList().then(e => {
				this.list = e.data;
				this.pageLast = Math.ceil(e.total / this.pageSize);
				this.show = true;
				uni.hideLoading();
			});
		},
		getList() {
			return getWagesPopList({
				params: {
					ywbh: this.id,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
			});
		},
		wagesRecord(item) {
			uni.$u.route({
				url: '/pages/index/wages/wagesRecord',
				params: {
					ywbh: this.id,
					rybh: item.rybh
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fbfcfc;
}
.card {
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 10rpx;
	background-color: #ffffff;
}
</style>
